<template>
  <el-drawer
    class="theme-set"
    v-model="localModelValue"
    :title="title"
    :direction="direction"
    size="400px"
    v-bind="$attrs"
  >
    <template #header>
      <span class="theme-set__header">{{ title }}</span>
    </template>
    <template #default>
      <div class="theme-set__content">
        <div class="theme-set__content-title">系统主题</div>
        <div class="theme-set__content-list">
          <oy-button
            v-for="item in state.colorList"
            :key="item.color"
            width="102"
            size="large"
            @click="changeColor(item.color)"
            ><template #prefix>
              <div
                class="select-box-class"
                :class="{ 'select-box-class__checked': item.color == state.currentColor }"
                :style="{ background: item.color }"
              ></div> </template
            >{{ item.type }}</oy-button
          >
        </div>
        <div class="theme-set__content-title margin-top20">界面功能</div>
        <div class="theme-set__content-list">
          <div>固定左侧菜单</div>
          <oy-switch
            class="margin-left20"
            v-model="state.fixedLeftMenu"
            inline-prompt
            size="large"
            active-text="是"
            inactive-text="否"
          />
        </div>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <oy-button @click="localModelValue = false">取消</oy-button>
        <oy-button type="primary" @click="confirmClick">确定</oy-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { computed, defineEmits, reactive, onMounted } from 'vue'

import OyButton from './OyButton.vue'
import OySwitch from '@/components/OySwitch.vue'

import type { PropType } from 'vue'
import { storeToRefs } from 'pinia'
import { useGlobalStore } from '@/store/modules/global'
import { useTheme } from '@/hooks/useTheme'

const globalStore = useGlobalStore()
const { primary } = storeToRefs(globalStore)

enum DirectionEnum {
  RTL = 'rtl',
  LTR = 'ltr',
  TTB = 'ttb',
  BTT = 'btt',
}
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  direction: {
    type: String as PropType<DirectionEnum>,
    // eslint-disable-next-line vue/valid-define-props
    default: DirectionEnum.LTR,
    validator(value: string): boolean {
      return ['rtl', 'ltr', 'ttb', 'btt'].includes(value)
    },
  },
  title: {
    type: String,
    default: '',
  },
})

const state = reactive({
  colorList: [
    {
      type: '红色',
      color: '#D32F44',
    },
    {
      type: '蓝色',
      color: '#5575EE',
    },
    {
      type: '金色',
      color: '#CE9748',
    },
  ],
  currentColor: '#D32F44',
  fixedLeftMenu: true,
})
const { changePrimary } = useTheme()
const emit = defineEmits(['update:modelValue', 'confirm'])

const localModelValue = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value),
})
const changeColor = (val: string) => {
  state.currentColor = val
}
const confirmClick = () => {
  changePrimary(state.currentColor)
  localModelValue.value = false
  emit('confirm')
}
onMounted(() => {
  state.currentColor = primary.value
})
</script>
<style lang="less" scoped>
.theme-set {
  width: 800px;
}
.theme-set__header {
  font-size: 18px;
  color: #303133;
  font-weight: bold;
}
.theme-set__content {
  .theme-set__content-title {
    font-size: 16px;
    color: #474747;
    height: 40px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 20px;
    font-weight: 600;
  }
  .theme-set__content-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    button {
      width: 102px;
      height: 50px;
    }
    .select-box-class {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      margin-right: 12px;
      position: relative;
    }
    .select-box-class__checked::before {
      content: '\2713'; /* 这是 Unicode 勾选标记 */
      display: block;
      position: absolute;
      top: 2px; /* 调整位置使其居中 */
      left: 4px; /* 调整位置使其居中 */
      font-size: 14px;
      line-height: 1;
      color: #fff; /* 勾选标记的颜色 */
    }
  }
}
</style>
